import 'package:flutter/material.dart';

class RowPage extends StatefulWidget {
  @override
  _RowPageState createState() => new _RowPageState();
}

class _RowPageState extends State<RowPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Row"),
      ),
      body: _buildListView(),
    );
  }

  Widget _buildListView() {
    return ListView.builder(
      itemBuilder: (context, index) {
        return _buildListViewItem(index);
      },
      itemCount: rows.length,
    );
  }

  Widget _buildListViewItem(index) {
    return Container(
      padding: EdgeInsets.all(10.0),
      alignment: Alignment.center,
      child: rows[index],
    );
  }
}

List<Widget> rows = <Widget>[
  Column(
    children: <Widget>[
      Text("MainAxisAlignment start"),
      Container(
        alignment: Alignment.center,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Container(
              width: 100,
              height: 50,
              color: Colors.cyanAccent,
            ),
            Container(
              width: 100,
              height: 50,
              color: Colors.blue,
            ),
            Container(
              width: 100,
              height: 50,
              color: Colors.yellow,
            ),
          ],
        ),
      ),
    ],
  ),
  Column(
    children: <Widget>[
      Text("MainAxisAlignment center"),
      Container(
        alignment: Alignment.center,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              width: 100,
              height: 50,
              color: Colors.cyanAccent,
            ),
            Container(
              width: 100,
              height: 50,
              color: Colors.blue,
            ),
            Container(
              width: 100,
              height: 50,
              color: Colors.yellow,
            ),
          ],
        ),
      ),
    ],
  ),
  Column(
    children: <Widget>[
      Text("MainAxisAlignment end"),
      Container(
        alignment: Alignment.center,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            Container(
              width: 100,
              height: 50,
              color: Colors.cyanAccent,
            ),
            Container(
              width: 100,
              height: 50,
              color: Colors.blue,
            ),
            Container(
              width: 100,
              height: 50,
              color: Colors.yellow,
            ),
          ],
        ),
      ),
    ],
  ),
  Column(
    children: <Widget>[
      Text("MainAxisAlignment spaceBetween"),
      Container(
        alignment: Alignment.center,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Container(
              width: 100,
              height: 50,
              color: Colors.cyanAccent,
            ),
            Container(
              width: 100,
              height: 50,
              color: Colors.blue,
            ),
            Container(
              width: 100,
              height: 50,
              color: Colors.yellow,
            ),
          ],
        ),
      ),
    ],
  ),
  Column(
    children: <Widget>[
      Text("MainAxisAlignment spaceAround"),
      Container(
        alignment: Alignment.center,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            Container(
              width: 100,
              height: 50,
              color: Colors.cyanAccent,
            ),
            Container(
              width: 100,
              height: 50,
              color: Colors.blue,
            ),
            Container(
              width: 100,
              height: 50,
              color: Colors.yellow,
            ),
          ],
        ),
      ),
    ],
  ),
  Column(
    children: <Widget>[
      Text("MainAxisAlignment spaceEvenly"),
      Container(
        alignment: Alignment.center,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Container(
              width: 100,
              height: 50,
              color: Colors.cyanAccent,
            ),
            Container(
              width: 100,
              height: 50,
              color: Colors.blue,
            ),
            Container(
              width: 100,
              height: 50,
              color: Colors.yellow,
            ),
          ],
        ),
      ),
    ],
  ),

  Column(
    children: <Widget>[
      Text("CrossAxisAlignment start"),
      Container(
        alignment: Alignment.center,
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Container(
              width: 100,
              height: 10,
              color: Colors.cyanAccent,
            ),
            Container(
              width: 100,
              height: 30,
              color: Colors.blue,
            ),
            Container(
              width: 100,
              height: 50,
              color: Colors.yellow,
            ),
          ],
        ),
      ),
    ],
  ),
  Column(
    children: <Widget>[
      Text("CrossAxisAlignment center"),
      Container(
        alignment: Alignment.center,
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(
              width: 100,
              height: 10,
              color: Colors.cyanAccent,
            ),
            Container(
              width: 100,
              height: 30,
              color: Colors.blue,
            ),
            Container(
              width: 100,
              height: 50,
              color: Colors.yellow,
            ),
          ],
        ),
      ),
    ],
  ),
  Column(
    children: <Widget>[
      Text("CrossAxisAlignment end"),
      Container(
        alignment: Alignment.center,
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: <Widget>[
            Container(
              width: 100,
              height: 10,
              color: Colors.cyanAccent,
            ),
            Container(
              width: 100,
              height: 30,
              color: Colors.blue,
            ),
            Container(
              width: 100,
              height: 50,
              color: Colors.yellow,
            ),
          ],
        ),
      ),
    ],
  ),

  Column(
    children: <Widget>[
      Text("TextDirection rtl"),
      Container(
        alignment: Alignment.center,
        child: Row(
          textDirection: TextDirection.rtl,
          children: <Widget>[
            Container(
              width: 100,
              height: 10,
              color: Colors.cyanAccent,
            ),
            Container(
              width: 100,
              height: 30,
              color: Colors.blue,
            ),
            Container(
              width: 100,
              height: 50,
              color: Colors.yellow,
            ),
          ],
        ),
      ),
    ],
  ),
  Column(
    children: <Widget>[
      Text("TextDirection ltr"),
      Container(
        alignment: Alignment.center,
        child: Row(
          textDirection: TextDirection.ltr,
          children: <Widget>[
            Container(
              width: 100,
              height: 10,
              color: Colors.cyanAccent,
            ),
            Container(
              width: 100,
              height: 30,
              color: Colors.blue,
            ),
            Container(
              width: 100,
              height: 50,
              color: Colors.yellow,
            ),
          ],
        ),
      ),
    ],
  ),

  Column(
    children: <Widget>[
      Text("MainAxisSize min"),
      Container(
        width: 400,
        height: 105,
        decoration: BoxDecoration(
            border: Border.all(
                color: Colors.blue
            )
        ),
        alignment: Alignment.center,
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Container(
              width: 100,
              height: 10,
              color: Colors.cyanAccent,
            ),
            Container(
              width: 100,
              height: 30,
              color: Colors.blue,
            ),
            Container(
              width: 100,
              height: 50,
              color: Colors.yellow,
            ),
          ],
        ),
      ),
    ],
  ),
  Column(
    children: <Widget>[
      Text("MainAxisSize max"),
      Container(
        width: 400,
        height: 105,
        decoration: BoxDecoration(
            border: Border.all(
                color: Colors.blue
            )
        ),
        alignment: Alignment.center,
        child: Row(
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            Container(
              width: 100,
              height: 10,
              color: Colors.cyanAccent,
            ),
            Container(
              width: 100,
              height: 30,
              color: Colors.blue,
            ),
            Container(
              width: 100,
              height: 50,
              color: Colors.yellow,
            ),
          ],
        ),
      ),
    ],
  ),
];
